<template>
  <div>
    <div class="outdiv biaoti">保险公司管理</div>
    <hr style="height: 1px; border: none; border-top: 1px solid #ddd" />

    <div class="outdiv">
      <el-button @click="openAdd" icon="el-icon-plus" type="primary" plain circle
        ></el-button
      >
      <el-button
        :disabled="chaxunstate === false"
        @click="chaXunBackTable"
        title="回到查询前"
        type="warning" plain
        icon="el-icon-back"
        circle
        ></el-button
      >
      <el-button
        style="margin-right: 1rem"
        @click="chaxun"
        icon="el-icon-search"
        title="查询"
        type="danger" plain
        circle
      ></el-button>
      <!-- =============================================================================查询下拉 -->
      <el-select
        v-model="chaxunName"
        placeholder="查询公司名"
        style="wdith: 50px"
        class="xiao"
      >
        <el-option
          v-for="item in baoXianGongsiName"
          :key="item.key"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <!--  =====================================================================保险券表渲染 -->
      <el-table class="xiajuli shangjuli" :data="elTableData">
        <el-table-column
          prop="insurance_com_id"
          label="编号"
          header-align="center"
          min-width="20"
        >
        </el-table-column>
        <el-table-column
          prop="insurance_com_name"
          label="公司名称"
          min-width="100"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="insurance_com_short_name"
          label="公司简称"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="insurance_com_report_phone"
          label="保险公司报警电话"
          min-width="60"
          header-align="center"
        ></el-table-column>
        <!-- <el-table-column prop="insurance_com_statusName" label="支持垫付"> -->
        <!-- </el-table-column> -->
        <el-table-column
          prop="insurance_com_address"
          label="地址"
          align="left"
          min-width="100"
          header-align="center"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="30" header-align="center">
          <template slot-scope="scope">
            <el-tooltip content="修改当前行" placement="bottom" effect="light">
              <el-button
                type="primary"
                circle
                plain
                icon="el-icon-edit"
                @click="openUpdate(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- =================================================================分页页码 -->
      <el-pagination
        align="center"
        layout="prev, pager, next"
        background
        :total="tableData.length"
        :page-size="4"
        @current-change="elChangeData"
        :current-page="elPage"
      >
      </el-pagination>
    </div>
    <dialogbaoxian
      :title="dialogtitle"
      :form="form"
      :state="dialogFormVisible"
      @closeDialog="quxiaodialog"
      @selectAllbaoxian="getBaoXianGongsi"
    ></dialogbaoxian>
  </div>
</template>
<script>
import * as api from "../../utils/api";
import dialogbaoxian from "../../components/guanli/dialogbaoxian";
export default {
  name: "baoXianGongsi",
  data() {
    return {
      dialogtitle: "",
      tableData: [], //优惠券表
      elPage: 1, //页码
      chaxunName: "",
      chaxunstate: false,
      cunzaiState: 0,
      insurance_com_statusName: "",
      baoXianGongsiName: [
        //发布方式渲染下拉框的数据
      ],
      dialogFormVisible: false,
      form: {
        //这是增加的数据,增加操作就提交它的值
        insuranceComAddress: "",
        insuranceComId: "",
        insuranceComName: "",
        insuranceComReportPhone: "",
        insurancComShortName: "",
      },
      formLabelWidth: "15rem",
    };
  },
  components: {
    dialogbaoxian,
  },
  computed: {
    //分页=====================================================>
    pageNum() {
      return Math.ceil(this.tableData.length / 4);
    },
    elTableData() {
      let start = (this.elPage - 1) * 4;
      let end = (this.elPage - 1) * 4 + 4;
      return this.tableData.slice(start, end);
    },
    //分页完=====================================================>
  },
  created() {
    this.getBaoXianGongsi(); //加载完页面就获取全部优惠券和渲染查询下拉
  },
  methods: {
    //获取不同页=================================================
    elChangeData(val) {
      this.elPage = val;
    },
    //请求所有保险公司信息===================================
    getBaoXianGongsi() {
      this.axios({
        url: api.GET_SELECT_ALL_BAOXIANGONGSI,
        method: "get",
        params: {},
      }).then((data) => {
        this.tableData = data.data.data;
        for (let i = this.baoXianGongsiName.length; i >= 0; i--) {
          this.baoXianGongsiName.splice(i, 1);
        }
        for (let i = 0; i < this.tableData.length; i++) {
          this.baoXianGongsiName.push({
            key: i,
            name: this.tableData[i].insurance_com_name,
          });
        }
      });
    },
    //修改==============================================================================修改>
    openUpdate(row) {
      this.dialogtitle = "修改保险公司信息";
      this.dialogFormVisible = true;
      this.form = {
        insuranceComAddress: row.insurance_com_address,
        insuranceComId: row.insurance_com_id,
        insuranceComName: row.insurance_com_name,
        insuranceComReportPhone: row.insurance_com_report_phone,
        insuranceComShortName: row.insurance_com_short_name,
        insuranceComStatus: row.insurance_com_status,
      };
    },
    //关闭弹框
    quxiaodialog() {
      this.dialogFormVisible = false;
    },
    //修改完==========================================================================修改完>
    //添加==================================================================================
    openAdd() {
      this.dialogtitle = "添加保险公司信息";
      this.dialogFormVisible = true;
    },
    //添加完==================================================================================
    //查询===============================================================
    chaXunBackTable() {
      this.chaxunstate = false;
      this.getBaoXianGongsi();
      this.chaxunName = "";
    },
    chaxun() {
      //查询公司名是否存在
      if (this.chaxunName !== "") {
        this.chaxunstate = true;
        this.axios({
          url: api.GET_SELECT_ALL_BAOXIANGONGSI,
          method: "get",
          params: { insurance_com_name: this.chaxunName },
        }).then((data) => {
           this.elPage = 1
          this.tableData = data.data.data;
         
        });
      } else {
        this.$message("请选择你要查询的公司");
      }
      
       
    },
  },
  watch: {
    dialogFormVisible() {
      if (!this.dialogFormVisible) {
        this.cunzai = "";
        this.bucunzai = "";
        this.form = {
          insuranceComAddress: "",
          insuranceComId: "",
          insuranceComName: "",
          insuranceComReportPhone: "",
          insurancComShortName: "",
        };
      }
    },
  },
};
</script>

<style lang ="less" scoped>
/* #youhuiquandiv {
  width: 90%;
  margin: 10px auto;
  padding: 2rem;
  background-color: rgb(84, 91, 109); */
  /* text-align: center; */
/* } */
.el_input_inner {
  background-color: red;
}
.red {
  color: red;
  margin-left: 10px;
}
.green {
  color: green;
  margin-left: 10px;
}
.addinput {
  width: 36rem;
}
  /deep/.el-table--border th.gutter:last-of-type {
        display: block !important;
        width: 17px !important;
    }
     /deep/.el-table .cell {
        text-align: center;
    }
</style>